<template>
  <div>
    <Header/>

    <div class="banner-content">
      <div class="swiper-container banner-lb">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="javascript:;">
              <img src="/image/banner.jpg" alt="">
            </a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:;">
              <img src="/image/banner.jpg" alt="">
            </a>
          </div>
        </div>
      </div>
      <div class="banner-abs">
        <div class="banner-abs-box">
          <div class="banner-abs-title">动力金融网历史年化收益率</div>
          <b>
            <AvgRate color="red"/>
          </b>
          <p>平台用户数</p>
          <span> <UserCount/> </span>
          <p class="banner-abs-border">累计成交金额</p>
          <span> <BidMoney/> </span>
        </div>
      </div>
    </div>
    <div class="banner-list">
      <ul>
        <li>
          <img src="/image/banner-tag1.png" alt="">
          <p>
            <b>实力雄厚</b>
            <span>亿级注册资本 ,千万技术投入</span>
          </p>
        </li>
        <li>
          <img src="/image/banner-tag2.png" alt="">
          <p>
            <b>风控严苛</b>
            <span>30道风控工序，60项信用审核</span>
          </p>
        </li>
        <li>
          <img src="/image/banner-tag3.png" alt="">
          <p>
            <b>投资省心</b>
            <span>资金安全风控，银行安全托管</span>
          </p>
        </li>
      </ul>
    </div>

    <!--新手宝-->
    <div class="content">
      <h2 class="public-title"><span>{{ newProduct.productName }}</span></h2>
      <div class="new-user">
        <div class="new-user-sm">
          <span>{{ newProduct.bidMinLimit }}元起投</span>
          <span>投资最高限额{{ newProduct.bidMaxLimit }}元</span>
          <span>当日计息</span>
        </div>
        <div class="new-user-number">
          <ul>
            <li>
              <p><b>{{ newProduct.rate }}</b>%</p>
              <span>历史年化收益率</span>
            </li>
            <li>
              <p><b>{{ newProduct.cycle }}</b>个月</p>
              <span>投资周期</span>
            </li>
            <li>
              <p><b>{{ newProduct.leftProductMoney }}</b>元</p>
              <span>剩余可投资金额</span>
            </li>
          </ul>
          <a href="details.html" target="_blank" class="new-user-btn">立即投资</a>
        </div>
        <span class="new-tag">新用户专享</span>
      </div>

      <!-- 优选产品 -->
      <!-- 优选产品 -->
      <!-- 优选产品 -->
      <h2 class="public-title"><span>优选产品</span>
        <a href="javascript:;" @click="$router.push('/list/1')" class="public-title-more">查看更多产品>></a>
      </h2>
      <ul class="preferred-select clearfix">
        <ProductItem :product="product11" />
        <ProductItem :product="product13" />
        <ProductItem :product="product16" />
      </ul>

      <!-- 散标 -->
      <!-- 散标 -->
      <!-- 散标 -->
      <h2 class="public-title"><span>散标产品</span>
        <a href="javascript:;" @click="$router.push('/list/2')" class="public-title-more">查看更多产品>></a>
      </h2>
      <ul class="preferred-select clearfix">
        <ProductItem v-for="product in product2" :product="product" />
      </ul>

    </div>

    <!--说明-->
    <div class="information-box">
      <ul>
        <li>
          <img src="/image/2-icon1.png" alt="">
          <p>优质借款</p>
          <span>严苛风控，多重审核</span>

        </li>
        <li>
          <img src="/image/2-icon2.png" alt="">
          <p>次日计息</p>
          <span>闪电成交，谁比我快</span>
        </li>
        <li>
          <img src="/image/2-icon3.png" alt="">
          <p>全年无休</p>
          <span>百万用户，一路同行</span>
        </li>
        <li>
          <img src="/image/2-icon4.png" alt="">
          <p>知心托付</p>
          <span>百万用户，一路同行</span>
        </li>
        <li>
          <img src="/image/2-icon5.png" alt="">
          <p>技术保障</p>
          <span>千万投入，专注研发</span>
        </li>
      </ul>
    </div>

    <Footer/>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import AvgRate from "@/components/AvgRate";
import UserCount from "@/components/UserCount";
import BidMoney from "@/components/BidMoney";
import Vue from "vue";
import ProductItem from "@/components/ProductItem";

export default {
  name: "Index",
  data() {
    return {
      newProduct: {},
      product11: {},
      product13: {},
      product16: {},
      product2: [],
    }
  },
  created() {
    // 新手宝
    Vue.axios.get("/product/0/1").then(({data}) => this.newProduct = data)
    // 优选：满月宝
    Vue.axios.get("/product/1/1").then(({data}) => this.product11 = data)
    // 优选：季度宝
    Vue.axios.get("/product/1/3").then(({data}) => this.product13 = data)
    // 优选：双季宝
    Vue.axios.get("/product/1/6").then(({data}) => this.product16 = data)
    // 散标：top3
    Vue.axios.get("/product/2/top3").then(({data}) => this.product2 = data)
  },
  components: {ProductItem, BidMoney, UserCount, AvgRate, Footer, Header}
}
</script>

<style scoped>

</style>